<!DOCTYPE html>
<html>

<head>
    <title>猪友动态</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travel.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script type="text/javascript" src="/js/plugins/form/jquery.form.js"></script>
    <script>
        $(function () {
            //获取装载数据的input框
            var currentInput = $("#currentPage");
            //创建用于存储游记的数组
            var travelArr = [];
            //总页数
            var pages = 1;
            //当前页为第一页
            // currentInput.val(1);

            //获取游记数据的方法
            function query() {
                var user = JSON.parse(sessionStorage.getItem('user'))
                    //获取当前页的值
                    var currentPage = currentInput.val();
                    $.get('/followAndFans', {currentPage: currentPage,fansId:user.id,pageSize:10}, function (data) {
                        //合并两个数组到第一个参数数组上
                        $.merge(travelArr, data.list);
                        //用于渲染时循环,循环时是取list的属性出来
                        var json = {
                            list: travelArr
                        };
                        var index1 =0
                        //渲染数据
                        console.log(json);
                        $("#allTravels").renderValues(json, {
                            getHref: function (item, value) {
                                //item是当前要渲染数据的元素(a),value就是render-key获取的值
                                //获取要跳转的地址
                                var href = $(item).data("href");
                                //把id拼接进去,再设置到a连接的href属性上
                                $(item).attr('href', href + value);
                            },
                            getTravel:function (item,value) {
                                var temp='';

                                // var index2 =0
                                $.get("/travels",{authorId:value},function (data) {
                                    console.log(data);
                                    $.each(data.list,function (index,ele) {
                                        temp += '<a href="/travelContent.html?id='+ ele.id +'"><h6>'+ ele.title +'</h6></a>'

                                    })
                                    index1 ++
                                    var friends =$("#dd .friends").eq(index1-1)
                                    $(friends).html(temp)
                                })
                        }
                        });
                        //设置总页数
                        pages = data.pages;
                    });
                //当前页input框+1
                currentInput.val(parseInt(currentPage) + 1);
            }

            //默认查询第一页的数据
            query();

            //当页面滚动条变化时，执行的函数
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height() - 1) {
                    var currentPage = currentInput.val();
                    //判断是否小于或等于最后一页,如果是就去查询
                    if (currentPage <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了!',
                            autoClose: 500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
        });
    </script>
</head>

<body>

<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a  href="javascript:window.history.go(-1);" >
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-20">
            <span style="font-size: 100%;text-align: center" class="glyphicon glyphicon-plus btn-sm" id="sousuo">猪友动态</span>
        </div>
    </div>
</div>
<div>


<input type="hidden" name="currentPage" id="currentPage" value="1">

    <h6>全部动态</h6>
    <div id="allTravels">

        <div id="dd" render-loop="list">
            <div >
                    <hr style="width: 100%">
                <div class="col">
                    <img style="width: 12%;height:12%;float:left;border-radius:50%" render-src="list.headImgUrl" href="/mine/userProfiles.html">
                    <div style="float:left;margin-top:10px;margin-left:5%">
                        <h4 render-html="list.nickName" style="font-size: 20px;top:100px;"></h4>
                    </div>
                    <div style="color: white">1</div>
                    <span render-html="list.id" style="color: white"></span>
               </div>
                <div render-key="list.id" render-fun="getTravel" class="friends" style="color: #6f42c1;font-size: 2px">

                </div>
            </div>
    </div>
</div>
</div>
</body>

</html>